import Mystyle from "../defultPage/BusinessOverview.module.css";
import * as echarts from "echarts";
import { useEffect, useState, } from "react";
import { useNavigate } from "react-router-dom";
const BusinessOverview = () => {
    //跳转到会员
    const navigate=useNavigate()
    const getHY=()=>{
        navigate("/HomePage/MemberCart");
    }
    //跳到预约记录
    const getYy=()=>{
        navigate("/HomePage/yuyuejl");
    }
  //团课私教的数组
  const [data, setData] = useState([
    { id:"1",
      time: "12.10",
      teachName: "小学生",
      content: "快速减脂训练",
    },
    {
        id:"2",
      time: "11.10",
      teachName: "小学生",
      content: "快速减脂训练",
    },
    {
        id:"3",
      time: "10.10",
      teachName: "小学生",
      content: "快速减脂训练",
    },
    {id:"4",
      time: "9.10",
      teachName: "小学生",
      content: "快速减脂训练",
    },
  ]);
  //办卡的数组
  const [BKData, setBKData] = useState([
    {
        id:"1",
      class: "教练私教课程",
      num: "5次",
      content: "次卡",
      time: "2020-4-18",
    },
    {
        id:"2",
      class: "教练私教课程",
      num: "5次",
      content: "次卡",
      time: "2020-4-18",
    },
    {
        id:"3",
      class: "教练私教课程",
      num: "5次",
      content: "次卡",
      time: "2020-4-18",
    },
    {
        id:"4",
      class: "教练私教课程",
      num: "5次",
      content: "期限卡",
      time: "2020-4-18",
    },
  ]);
  //团课私教渲染
  const TkList = () => {
    return data.map((item, idx) => (
      <div
        style={{
          width: "100%",
          height: "50px",
          lineHeight: "50px",
          display: "flex",
          justifyContent: "start",
          alignItems: "center",
        }}
        key={item.id}
      >
        <span style={{ marginLeft: "10px", width: "80px" }}>{item.time}</span>{" "}
        <span
          style={{
            marginLeft: "25px",
            width: "10px",
            height: "10px",
            borderRadius: "50%",
            backgroundColor: "#1e9fff",
          }}
        ></span>{" "}
        <span style={{ marginLeft: "5px", fontWeight: 600 }}>
          {item.teachName}
        </span>{" "}
        <span style={{ marginLeft: "25px" }}>{item.content}</span>
      </div>
    ));
  };
  //办卡渲染
//   echarts 第一个
    useEffect(()=>{
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;
        
        option = {
          xAxis: {
            type: 'category',
            data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
          },
          title: {
            text: '近一周销售统计',
            left:80,
            top:20,
            textStyle: {
                fontSize:"15px",
            
              },
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 260],
              type: 'line',
              itemStyle: { normal: { color: "#2ec7c9", lineStyle: { color: "#589bfe" } } },
            }
            
          ]
        };
        
       
   //echarts第二个
   var chartDom1 = document.getElementById('mainOne');
   var myChart1 = echarts.init(chartDom1);
   var option1;
   
   option1 = {
     xAxis: {
       type: 'category',
       data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
     },
     yAxis: {
       type: 'value'
     },
     title: {
        text: '近一周销售统计',
        left:80,
        top:20,
        textStyle: {
            fontSize:"15px",
        
          },
      },
     series: [
       {
         data: [150, 230, 224, 218, 135, 147, 260],
         type: 'line',
         itemStyle: { normal: { color: "#2ec7c9", lineStyle: { color: "#589bfe" } } },
       }
       
     ]
   };
   
   option && myChart.setOption(option);
   option1 && myChart1.setOption(option1);
    })
  
  const BkList = () => {
    return BKData.map((item) => (
      <div
        style={{
          width: "100%",
          height: "50px",
          lineHeight: "50px",
          display: "flex",
          justifyContent: "start",
          alignItems: "center",
        }}
        key={item.id}
      >
        <span style={{ marginLeft: "10px" }}>{item.time}</span>{" "}
        <span
          style={{
            marginLeft: "25px",
            width: "10px",
            height: "10px",
            borderRadius: "50%",
            backgroundColor: "#1e9fff",
          }}
        ></span>{" "}
        <span style={{ marginLeft: "25px", fontWeight: 600 }}>
          {item.class}
        </span>{" "}
        <span style={{ marginLeft: "55px", fontWeight: 600 }}>{item.num}</span>{" "}
        <span style={{ marginLeft: "15%" }}>{item.content}</span>
      </div>
    ));
  };

  //今日团课
  const tk = () => {
    setData([
      {
        time: "12.10",
        teachName: "小学生",
        content: "快速减脂训练",
      },
      {
        time: "11.10",
        teachName: "小学生",
        content: "快速减脂训练",
      },
      {
        time: "10.10",
        teachName: "小学生",
        content: "快速减脂训练",
      },
      {
        time: "9.10",
        teachName: "小学生",
        content: "快速减脂训练",
      },
    ]);
    let tk = document.getElementById("tk");
    let sj = document.getElementById("sj");
    tk.style.backgroundColor = "white";
    sj.style.backgroundColor = "#f2f2f2";
    tk.style.color = "#1e9fff";
    sj.style.color = "#999999";
  };
  //今日私教
  const sj = () => {
    setData([
      {
        time: "12.10",
        teachName: "安和桥南",
        content: "快速减脂训练",
      },
      {
        time: "11.10",
        teachName: "安和桥南",
        content: "快速减脂训练",
      },
      {
        time: "10.10",
        teachName: "安和桥南",
        content: "快速减脂训练",
      },
      {
        time: "9.10",
        teachName: "安和桥南",
        content: "快速减脂训练",
      },
    ]);
    let tk = document.getElementById("tk");
    let sj = document.getElementById("sj");
    sj.style.backgroundColor = "white";
    tk.style.backgroundColor = "#f2f2f2";
    sj.style.color = "#1e9fff";
    tk.style.color = "#999999";
  };
  return (
    <div
      style={{
        width: "100%",
        height: "98%",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        // overflowY: "scroll",
      }}
    >
      <div
        style={{
          width: "97%",
          display: "flex",
          alignItems: "center",
          flexDirection: "column",
          marginTop: "10px",
          height: "100%",
          backgroundColor: "#f2f2f2",
          //   borderRadius: "8px 8px 0px 0px",
          // border: "1px solid red",
          overflowY: "scroll",
          overflowX: "hidden",
        }}
      >
        <div style={{ width: "100%", height: "100%" }}>
          <div
            style={{
              width: "100%",
              display: "flex",
              justifyContent: "space-between",
            }}
          >
            <div
              style={{
                width: "32.5%",
                height: "100px",
                backgroundColor: "#ed5565",
                fontWeight: 800,
                color: "#ffffff",
              }}
            >
              <div
                style={{
                  height: "25%",
                  display: "flex",
                  justifyContent: "space-between",
                }}
              >
                <span style={{ marginLeft: "2%" }}>今日应收（课程）</span>{" "}
                <span>今日应收（商城）</span>
              </div>
              <div
                style={{
                  height: "25%",
                  display: "flex",
                  justifyContent: "space-between",
                }}
              >
                <span style={{ marginLeft: "10%" }}>100</span>{" "}
                <span style={{ marginRight: "10%" }}>100</span>
              </div>
              <div
                style={{
                  height: "25%",
                  display: "flex",
                  justifyContent: "space-between",
                }}
              >
                <span style={{ marginLeft: "2%" }}>昨日应收（课程）</span>{" "}
                <span>昨日应收（商城）</span>
              </div>
              <div
                style={{
                  height: "25%",
                  display: "flex",
                  justifyContent: "space-between",
                }}
              >
                <span style={{ marginLeft: "10%" }}>100</span>{" "}
                <span style={{ marginRight: "10%" }}>0</span>
              </div>
            </div>
            <div
              style={{
                width: "32.5%",
                height: "100px",
                backgroundColor: "#2096f3",
                fontWeight: 800,
                color: "#ffffff",
              }}
            >
              <div
                style={{
                  height: "25%",
                  display: "flex",
                  justifyContent: "space-between",
                }}
              >
                <span style={{ marginLeft: "2%" }}>今日新增会员</span>{" "}
                <span style={{ marginRight: "2%" }}>累积会员</span>
              </div>
              <div
                style={{
                  height: "25%",
                  display: "flex",
                  justifyContent: "space-between",
                }}
              >
                <span style={{ marginLeft: "10%" }}>100</span>{" "}
                <span style={{ marginRight: "10%" }}>100</span>
              </div>
              <div
                style={{
                  height: "25%",
                  display: "flex",
                  justifyContent: "space-between",
                }}
              >
                <span style={{ marginLeft: "2%" }}>昨日新增会员</span>{" "}
              </div>
              <div
                style={{
                  height: "25%",
                  display: "flex",
                  justifyContent: "space-between",
                }}
              >
                <span style={{ marginLeft: "10%" }}>100</span>{" "}
              </div>
            </div>
            <div
              style={{
                width: "32.5%",
                height: "100px",
                backgroundColor: "#0cc3aa",
                marginRight: "10px",
                fontWeight: 800,
                color: "#ffffff",
              }}
            >
              <div
                style={{
                  height: "25%",
                  display: "flex",
                  justifyContent: "space-between",
                }}
              >
                <span style={{ marginLeft: "2%" }}>今日上课</span>{" "}
              </div>
              <div
                style={{
                  height: "25%",
                  display: "flex",
                  justifyContent: "space-between",
                }}
              >
                <span style={{ marginLeft: "10%" }}>100</span>{" "}
              </div>
              <div
                style={{
                  height: "25%",
                  display: "flex",
                  justifyContent: "space-between",
                }}
              >
                <span style={{ marginLeft: "2%" }}>昨日上课</span>{" "}
              </div>
              <div
                style={{
                  height: "25%",
                  display: "flex",
                  justifyContent: "space-between",
                }}
              >
                <span style={{ marginLeft: "10%" }}>100</span>{" "}
              </div>
            </div>
          </div>
          <div
            style={{
              width: "100%",
              height: "250px",
              marginTop: "20px",
              display: "flex",
              justifyContent: "space-between",
            }}
          >
            <div
              style={{
                width: "48%",
                height: "100%",
                backgroundColor: "#ffffff",
                border: "1px solid #e9e9e9",
              }}
            >
              <div
                style={{
                  width: "100%",
                  height: "50px",
                  backgroundColor: "#f2f2f2",
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "center",
                }}
              >
                <div
                  style={{
                    height: "50px",
                    display: "flex",
                    lineHeight: "50px",
                  }}
                >
                  <div onClick={tk} id="tk" className={Mystyle["tk"]}>
                    今日团课
                  </div>
                  <div onClick={sj} id="sj" className={Mystyle["sj"]}>
                    今日私教
                  </div>
                </div>
                <div onClick={getYy}>
                  <div className={Mystyle["more"]}>更多</div>
                </div>
              </div>
              <div
                style={{
                  height: "200px",
                  width: "100%",
                  display: "flex",
                  flexDirection: "column",
                  justifyContent: "space-between",
                  overflowY: "scroll",
                }}
              >
                <TkList></TkList>
              </div>
            </div>
            <div
              style={{
                width: "48%",
                height: "100%",
                backgroundColor: "#ffffff",
                marginRight: "1%",
                border: "1px solid #e9e9e9",
              }}
            >
              <div
                style={{
                  width: "100%",
                  height: "50px",
                  backgroundColor: "#f2f2f2",
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "center",
                }}
              >
                <div
                  style={{
                    height: "50px",
                    display: "flex",
                    lineHeight: "50px",
                  }}
                >
                  <div className={Mystyle["bk"]}>最新办卡</div>
                </div>
                <div onClick={getHY}>
                  <div className={Mystyle["more"]}>更多</div>
                </div>
              </div>
              
              <div
                style={{
                  height: "200px",
                  width: "100%",
                  display: "flex",
                  flexDirection: "column",
                  justifyContent: "space-between",
                  overflowY: "scroll",
                }}
              >
                <BkList></BkList>
              </div>
            </div>
          </div>
          {/* <div style={{border:"1px solid #e4e4e4",width:"100%",marginTop:"20px"}}>
            
         </div> */}
         <div
          
          style={{
            width: "99%",
            height: "20px",
          //   backgroundColor: "white",
            marginTop: "20px",
          //   border: "1px solid #e9e9e9",
          display:"flex",
          justifyContent:"start",
          fontWeight:800,
          textIndent:"1em",
          }}
        >商城销售统计</div>
          <div
            id="main"
            style={{
              width: "99%",
              height: "300px",
              backgroundColor: "white",
              marginTop: "20px",
              border: "1px solid #e9e9e9",
            }}
          ></div>
           <div
          
            style={{
              width: "99%",
              height: "20px",
            //   backgroundColor: "white",
              marginTop: "20px",
            //   border: "1px solid #e9e9e9",
            display:"flex",
            justifyContent:"start",
            fontWeight:800,
            textIndent:"1em",
            }}
          >课程销售统计</div>
          <div
            id="mainOne"
            style={{
              width: "99%",
              height: "300px",
              backgroundColor: "white",
              marginTop: "20px",
              border: "1px solid #e9e9e9",
            
            }}
          ></div>
        </div>
      </div>
    </div>
  );
};
export default BusinessOverview;
